<template>
	<view class="page">
		<image class="main_top" src="../../static/main_top.png" mode="widthFix">
		</image>
		<image class="logo" src="/static/main.png" mode="widthFix"></image>
		<image class="bottom" src="/static/main_bottom.png" mode="widthFix"></image>

		<view class="top">
			<span>你好，陌生人...</span>
			<span>你的世界正在发生什么</span>
			<span>我可以为你解答~</span>
		</view>
		<view class="content">
			<uni-row gutter="20">
				<uni-col span="8" v-for="(item,index) in list" :key="index">
					<view class="item" @click="toPage(index)">
						<view class="info">
							{{item.title}}
							<span>{{item.desc}}</span>
						</view>
					</view>
				</uni-col>
			</uni-row>
		</view>

		<view class="ad_bottom">
			<!-- #ifdef MP-WEIXIN -->
			<ad-custom unit-id="adunit-ad45b676cc31e105" bindload="adLoad" binderror="adError"
				bindclose="adClose"></ad-custom>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<ad unit-id="axaf2ryvtuxpzkmt8b" bindload="adLoad" binderror="adError" bindclose="adClose"
				ad-intervals="30" fixed="false" type="rImg" scale="100" />
			<!-- #endif -->

		</view>

		<!-- <ad adpid="111111"></ad> -->
	</view>
</template>

<script>
	let videoAd = null;
	export default {

		data() {
			return {
				list: [{
						title: "答案之书",
						key: "dazs",
						desc: "翻开它，将得到无数的人生解答"
					},
					{
						title: "答案之书(Max)",
						key: "dazs_max",
						desc: "打开这本书，拿走一个简单的答案和暗示"
					},
					{
						title: "答案之书(AI)",
						key: "dazs_ai",
						desc: "你相信么？AI可以为你解惑"
					},
					{
						title: "每日愈言",
						key: "mryy",
						desc: "今天的你是否需要一些鼓励和治愈呢？"
					},
					{
						title: "星座大师",
						key: "xzds",
						desc: "我可以为你解答星座相关问题～"
					},
					{
						title: "解梦大师",
						key: "jmds",
						desc: "你的梦境是否预示这什么？"
					}
					// ,
					// {
					// 	title: "",
					// 	key: "smds",
					// 	desc: "你想知道什么？"
					// }, {
					// 	title: "敬请期待",
					// 	key: "jqqd"
					// }
				],
				ad: null,
			}
		},
		onLoad() {
			// #ifdef MP-TOUTIAO
			this.ad = tt.createRewardedVideoAd({
				adUnitId: "purszig98p846mg0p3",
			});

			// 监听错误
			this.ad.onError((err) => {
				tt.hideLoading();
				switch (err.errCode) {
					case 1004:
						// 无合适的广告
						break;
					default:
						// 更多请参考错误码文档
				}
			});

			// 监听视频播放完成
			this.ad.onClose((data) => {
				tt.hideLoading();
				if (data.isEnded) {
					// console.log("观看了", data.count, "个视频");
					var t = new Date().format("yyyy-MM-dd")
					uni.setStorageSync("count_" + t, 2 + "")

					uni.showToast({
						title: "次数+2"
					})
				} else {
					console.log("未观看完视频");
				}
			});

			// do other thing
			// 卸载 close 事件监听
			this.ad.offClose(closeHandler);

			// 预加载资源
			this.ad.load();
			// #endif

			// #ifdef MP-WEIXIN
			if (wx.createRewardedVideoAd) {
				videoAd = wx.createRewardedVideoAd({
					adUnitId: 'adunit-f78e2150ee988019'
				})
				videoAd.onLoad(() => {})
				videoAd.onError((err) => {
					console.error('激励视频光告加载失败', err)
				})
				videoAd.onClose((res) => {
					if (res && res.isEnded) {
						// 正常播放结束，可以下发游戏奖励
						// 正常播放结束
						// console.log("onadclose " + detail.isEnded);
						var t = new Date().format("yyyy-MM-dd")
						uni.setStorageSync("count_" + t, 2 + "")

						uni.showToast({
							title: "次数+2"
						})
					} else {
						// 播放中途退出，不下发游戏奖励
					}
				})
			}
			// #endif
		},
		onShareAppMessage(res) {

			return {
				title: '翻开它，将得到无数的人生解答',
				path: '/pages/index/index'
			}
		},
		onShareTimeline() {
			return {
				title: '翻开它，将得到无数的人生解答',
			}
		},
		methods: {
			toPage(index) {

				var model = this.list[index];
				if (model.type != 'jqqd') {
					var t = new Date().format("yyyy-MM-dd")
					var count = uni.getStorageSync("count_" + t);
					if (!count) {
						count = 2;
					}
					if (count <= 0) {
						uni.showModal({
							title: '次数已经用尽！观看激励视频，获取新的次数',
							success: (res) => {
								if (res.confirm) {
									// #ifdef MP-TOUTIAO
									this.ad.show();
									// #endif	
									// #ifdef MP-WEIXIN
									if (videoAd) {
										videoAd.show().catch(() => {
											// 失败重试
											videoAd.load()
												.then(() => videoAd.show())
												.catch(err => {
													console.error('激励视频 广告显示失败', err)
												})
										})
									}
									// #endif
								}
							}

						});
						return;
					}
				}
				switch (model.key) {
					case "dazs": {
						uni.navigateTo({
							url: '/pages/answer/index?type=answer'
						})

					}
					break;
					case "dazs_max": {

						uni.navigateTo({
							url: '/pages/answer/index?type=answer_max'
						})

					}
					break;
					case "dazs_ai": {
						uni.navigateTo({
							url: '/pages/answer/index'
						})
					}
					break;
					case "mryy": {
						uni.navigateTo({
							url: '/pages/encourage/index'
						})

					}
					break;
					case "jqqd": {
						uni.showModal({
							title: "敬请期待",
							showCancel: false,
							confirmText: "知道了"
						})
					}
					break;
					default: {
						uni.navigateTo({
							url: `/pages/master/index?title=${model.title}&type=${model.key}`
						})
						break
					}
				}
			},
			adLoad() {
				console.log('原生模板广告加载成功')
			},
			adError(err) {
				console.error('原生模板广告加载失败', err)
			},
			adClose() {
				console.log('原生模板广告关闭')
			},
		}
	}
	Date.prototype.format = function(fmt) {
		var o = {
			"M+": this.getMonth() + 1, //月份
			"d+": this.getDate(), //日
			"h+": this.getHours(), //小时
			"m+": this.getMinutes(), //分
			"s+": this.getSeconds(), //秒
			"q+": Math.floor((this.getMonth() + 3) / 3), //季度
			"S": this.getMilliseconds() //毫秒
		};
		if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		for (var k in o)
			if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : ((
				"00" + o[k]).substr(("" + o[k]).length)));
		return fmt;
	}
</script>

<style lang="scss">
	.page {
		width: 100vw;
		height: 100vh;
		background-color: #202730;
		position: relative;

	}

	.main_top {
		width: 100%;
		animation: flicker 2s infinite;
	}

	.logo {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		animation: flicker 2s infinite;
	}

	@keyframes flicker {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.7;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
			/* 从0度开始旋转 */
		}

		to {
			transform: rotate(360deg);
			/* 旋转一周，即360度 */
		}
	}

	.ad_bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.bottom {
		width: 50%;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: 9999;
		// animation: flicker 2s infinite;
		animation: rotate 2s linear infinite;
		/* 定义动画 */
		opacity: 0.5;
	}

	.top {
		position: absolute;
		width: 100%;
		top: 5%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		color: white;
		font-size: 16px;

		span {
			margin-top: 10px;
			animation: flicker 2s infinite;
		}
	}

	.content {
		width: 90%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.item {
			width: 100%;
			height: 150px;
			/* 高度与宽度一致 */
			border: 1px solid #b88917;
			/* 金色边框 */
			margin-top: 15px;
			background-color: #202730;
			color: white;
			font-size: 14px;
			// opacity: 0.7;

			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-left: 10px;
				width: 80%;
				height: 100%;

				span {
					font-size: 8px;
					color: #e6e6ec;
				}
			}


		}
	}
</style>